<@override name="content">

<div class="pagination pagination-centered">
  <div class="pull-left">
    <a href="notice" class="btn btn-success">Notice List</a>
    <#if user??>
    <a href="" class="btn btn-primary" data-toggle="modal" data-target="#postModal">Post new topic</a>
    <#else>
    <a href="" class="btn btn-info" id="postBtn" data-toggle="modal" data-target="#loginModal">Post new topic</a>
    </#if>
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=threadList.pageNumber totalPage=threadList.totalPage actionUrl="discuss/" />
  <div class="pull-right">
    <span class="badge badge-info">${threadList.pageNumber}/${threadList.totalPage} Pages</span> 
    <span class="badge badge-info">${threadList.totalRow} Threads</span>
  </div>
</div>
<div class="row">
  <#if topicList??>
      <#assign prevDeep = 1>
      <div id="tree">
        <ul>
      <#list topicList as topic>
        <#assign deep = deepTree.get(topic.id)>
        <#assign parentDeep = deepTree.get(topic.parentId)>
        <#if (deep > prevDeep)>
          <ul>
        <#elseif (deep < prevDeep)>
            </li>
          <#list prevDeep-1..deep as i>
              </ul>
            </li>
          </#list>
        <#elseif prevDeep==parentDeep>
          </li>
        </#if>
            <li class="node" data-id="${topic.id}" data-deep="${deep}">
              <i class="topic topic-open"></i>
              <a href="javascript:void(${topic.id});" class="topic-title" data-id="${topic.id}">${topic.title}</a>
              Post by <a href="user/profile/${topic.name}">${topic.name}</a>
              At <span class="timestamp" data="${topic.ctime}"></span>
              <#if (deep==1 && topic.pid?? && topic.pid>0)>
              For <a href="problem/show/${topic.pid}">Problem ${topic.pid}</a>
              </#if>
        <#assign prevDeep=deep>
      </#list>
            </li>
          <#if (prevDeep>1)>
          <#list prevDeep-1..1 as i>
              </ul>
            </li>
          </#list>
          </#if>
        </ul>
      </div>
    </#if>
</div>

<div class="modal hide fade discussModal" id="postModal">
  <form class="topicForm" id="newThread" action="discuss/save" method="post">
     <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="postModalLabel">Post new topic</h3>
    </div>
    <div class="modal-body">
      <div class="control-group">
        <div class="controls">
          <input type="text" id="inputTitle" class="input-xxlarge" name="topic.title" maxlength="64" placeholder="Title" autofocus required>
        </div>
        <div class="controls">
          <input type="number" class="input-small" id="inputProblem" name="topic.pid" min="1000" value="${pid!}" placeholder="Problem ID">
          <span class="help-inline" id="problemTitle"></span>
        </div>
        <div class="controls">
          <textarea id="inputContent" name="topic.content" maxlength="30000" placeholder="Enter your content here" required></textarea>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="pull-left">
        <p class="text-error" id="error"></p>
      </div>
      <button type="submit" class="btn btn-primary">Post</button>
      <button type="reset" class="btn btn-info">Reset</button>
      <button class="btn" data-dismiss="modal" accesskey="x">Cancel</button>
    </div>
  </form>
</div>

<div class="modal hide fade discussModal" id="topicModal">
  <form class="topicForm" id="newTopic" action="discuss/save" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="topicModalLabel">
        <span id="title"></span>
      </h3>
    </div>
    <div class="modal-body">
      <div id="content">
        <img src="assets/images/ajax-loader.gif" alt="loading" /> Loading...
      </div>
      <div>
        <input type="hidden" id="topicProblem"  name="topic.pid">
        <input type="hidden" id="topicThreadId" name="topic.threadId">
        <input type="hidden" id="topicParentId" name="topic.parentId">
        <input type="text"   id="topicTitle" class="input-xxlarge" name="topic.title" maxlength="64" placeholder="Title" autofocus required>
        <textarea id="topicContent" name="topic.content" maxlength="30000" placeholder="Enter your content here" required></textarea>
        <div class="pull-left">
          <p class="text-error" id="topic-error"></p>
        </div>
        <div class="pull-right">
          <button type="submit" class="btn btn-primary">Post</button>
          <button class="btn" data-dismiss="modal" accesskey="x">Cancel</button>
        </div>
      </div>
    </div>
  </form>
</div>
</@override>

<@override name="scripts">
<link href="assets/bootstrap-wysihtml5/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css">
  <script src="assets/bootstrap-wysihtml5/lib/wysihtml5-0.3.0.min.js"></script>  
  <script src="assets/bootstrap-wysihtml5/bootstrap-wysihtml5-0.0.2.min.js"></script>
  <script src="assets/js/ubb.js"></script>
    
  <script type="text/javascript">
    $(document).ready(function() {
      $('#inputContent').wysihtml5({
        'font-styles': false
      });

      $('#topicContent').wysihtml5({
        'font-styles': false
      });
      
      function getProblemTitle() {
        var pid = this.value;
        if (pid >= 1000)
        {
          $.get("api/problem/getField", { name: "title", pid: this.value },
            function(data) {
              if (data.result)
              {
                $("#problemTitle").html('<a href="problem/show/' + pid + '" target="_blank">' + data.result + '</a>');
              }
              else
              {
                $("#problemTitle").html('');
              }
            });
        }
        else
        {
          $("#problemTitle").html('');
        }
      }
      $("#inputProblem").change(getProblemTitle).keyup(getProblemTitle);

      $("#newThread").submit(function() {
        var $content = $('#inputContent');
        var html = $content.val();
        if (html.length < 5) {
          $('#error').html('The content length should between 5 and 30000.').show();
          setTimeout(function() {
            $('#error').hide();
          }, 10000);
          return false;
        }
        var ubb = html2ubb(html);
        $content.data("wysihtml5").editor.setValue(ubb);
        return true;
      });

      $("#newTopic").submit(function() {
        var $content = $('#topicContent');
        var html = $content.val();
        if (html.length < 5) {
          $('#topic-error').html('The content length should between 5 and 30000.').show();
          setTimeout(function() {
            $('#topic-error').hide();
          }, 10000);
          return false;
        }
        var ubb = html2ubb(html);
        $content.data("wysihtml5").editor.setValue(ubb);
        return true;
      });

      $('a.topic-title').click(function () {
        var that = $(this);
        var id = that.data("id");
        var target = $('#topicModal');

        target.modal("show");
        $.get("api/discuss", { id: id },
          function(data) {
            if (data.topic.success)
            {
              var html = parseTimestamp(data.topic.ctime) 
                        + ' by <a href="user/profile/' 
                        + data.topic.name + '" target="_blank">' 
                        + data.topic.name + '</a>\n';
              if (data.topic.pid) {
                html += ' for problem <a href="problem/show/' 
                        + data.topic.pid + '" title="' 
                        + data.topic.problem + '" target="_blank">' 
                        + data.topic.pid + '</a>\n';
              }
              html += '<pre>' + ubb2html(data.topic.content) + '</pre>\n';
              var title = data.topic.title;
              if (title.substr(0, 4) !== 'Re: ') {
                title = 'Re: ' + title;
              }
              $('#topicModalLabel', target).html(data.topic.title);
              $('#content', target).html(html).append($('.node[data-id="' + data.topic.threadId + '"]').clone(true, true));
              $('a[data-id="' + data.topic.id + '"]', target).addClass('strong');
              $('#topicProblem', target).val(data.topic.pid);
              $('#topicThreadId', target).val(data.topic.threadId);
              $('#topicParentId', target).val(data.topic.id);
              $('#topicTitle', target).val(title);
            }
            else
            {
              $('#topicModalLabel').html('Error');
              $('#content', target).html(data.result).addClass("alert alert-error");
            }
        });
      });

      $('.topic').click(function () {
        var that = $(this);
        if(that.parent().children('ul').size()) {
          if (that.hasClass('topic-open')) {
            that.removeClass('topic-open').addClass('topic-closed');
          } else {
            that.removeClass('topic-closed').addClass('topic-open');
          }
        }
        that.parent().children("ul").toggle("slow");
      });
    });
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.timestamp').each( function() {
        var that = $(this);
        that.html(parseTimestamp(that.attr('data')));
      });
      $('#postBtn').click(function() {
        system.callback = function() {
          $('#loginModal').modal('hide');
          $('#postModal').modal('show');
        };
      });
    });
  </script>
</@override>
<@extends name="../common/_layout.html" />
